<script setup lang="ts">
import type { Props } from './uilts/types'
defineOptions({
    name: 'Filtrate'
})

const $props = defineProps<Props>()

const $emit = defineEmits(['onSelectChange'])

const formData = ref<any>({})

watch(() => formData, (newValue) => {
    $emit('onSelectChange', newValue)
}, { deep: true })

function handleScreen() {
    formData.value = {}
}

</script>

<template>
    <div class="filtrate">
        <div class="screen">
            <el-select class="select" v-for="(column, index) in columns" :key="index" v-model="formData[column.value]"
                :placeholder="column.placeholder" size="small" value-key="type">
                <el-option v-for="(item, index) in column.item" :key="index" :label="item.title"
                    :value="JSON.stringify({ type: item.type, op: item.op })" />
            </el-select>
            <button class="clear-screen" @click="handleScreen">清除筛选</button>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.filtrate {
    font-family: 'SOURCEHANSANSCN-EXTRALIGHT';

    .screen {
        border-top: 1px dashed #BBBBBB;
        border-bottom: 1px dashed #BBBBBB;
        height: 48px;
        display: flex;
        align-items: center;

        .clear-screen {
            display: block;
            border: none;
            background-color: transparent;
            color: rgb(55, 133, 242);
            font-size: 14px;
            margin-left: 100px;
            cursor: pointer;
            font-family: 'SOURCEHANSANSCN-EXTRALIGHT';
        }

        .select {
            width: 70px;
            margin: 0 25px;
            font-family: 'SOURCEHANSANSCN-EXTRALIGHT';
        }
    }
}
</style>


<style lang="scss">
.filtrate {
    .screen {
        .el-select__wrapper {
            box-shadow: none;
        }
    }

}
</style>